<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0" />
            <el-col :span="12" :xs="24">
                <!-- 登录的表单 -->
                <el-form ref="loginFormRef" class="login_form" :model="loginForm" :rules="rules">
                    <div class="welcome_title">欢迎您，请登录！</div>
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" :prefix-icon="User" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" show-password />
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="loading" class="login_btn" type="primary" size="default" @click="login">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores/modules/user.ts'
import { FormInstance, FormRules } from 'element-plus';

//获取el-form组件
const loginFormRef = ref<FormInstance>()
//获取路由器

//定义变量控制按钮加载效果
const loading = ref(false)
//收集账号与密码的数据
const loginForm = reactive({ username: 'admin', password: '123456' })

//自定义校验规则函数
const validatorUserName = (rule: any, value: string, callback: Function) => {
    //rule:即为校验规则对象
    //value:即为表单元素文本内容
    //函数:如果符合条件callBack放行通过即为
    //如果不符合条件callBack方法,注入错误提示信息
    if (value.length >= 5) {
        callback()
    } else {
        callback(new Error('账号长度至少五位'))
    }
}

const validatorPassword = (rule: any, value: string, callback: Function) => {
    if (value.length >= 6) {
        callback()
    } else {
        callback(new Error('密码长度至少六位'))
    }
}

//定义表单校验需要配置对象
const rules = reactive<FormRules>({
    //规则对象属性:
    //required,代表这个字段务必要校验的
    //min:文本长度至少多少位
    //max:文本长度最多多少位
    //message:错误的提示信息
    //trigger:触发校验表单的时机 change->文本发生变化触发校验,blur:失去焦点的时候触发校验规则
    username: [
        // { required: true, min: 6, max: 10, message: '账号长度至少六位', trigger: 'change' }
        { trigger: 'change', validator: validatorUserName }
    ],
    password: [
        // { required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' }
        {
            trigger: 'change', validator: validatorPassword
        }
    ]
})

//登录请求
const login = () => {
    useUserStore().userLogin(loginForm)
}
</script>

<style scoped lang="scss">
.login_container {
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/login_bg.jpeg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 50%;
        top: 25vh;
        left: 30%;
        background: #fff;
        border-radius: 10px;
        padding: 20px;

        .welcome_title {
            font-family: "Source Han Sans CN";
            font-weight: 400;
            font-size: 32px;
            text-align: left;
            color: #1048b9;
            margin: 20px 0;
        }

        .login_btn {
            width: 100%;
        }
    }
}
</style>